window.addEventListener('load', function () {

    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    var num = 0;
    var c = 0;
    var flag = true;
    var anniul = document.querySelector('.anniul');
    var anniur = document.querySelector('.anniur');
    focus.addEventListener('mouseenter', function () {
        anniul.style.display = 'block'
        anniur.style.display = 'block'
        clearInterval(timer);
        time = null;
    });
    focus.addEventListener('mouseleave', function () {
        anniul.style.display = 'none'
        anniur.style.display = 'none'
         timer = setInterval(function(){
            anniur.click();
        },2000)
    });
    for (var i = 0; i < ul.children.length; i++) {
        var dd = document.createElement('dd');
        dd.setAttribute('index', i)
        ol.appendChild(dd);

        dd.addEventListener('click', function () {

            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'bai';
            var index = this.getAttribute('index');
            num = index;
            c = index;
            // ul.style.left = ul.style.left - index * focus.offsetWidth + 'px';
            animate(ul, -index * focus.offsetWidth);

        })
    }
    ol.children[0].className = 'bai';

    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    anniur.addEventListener('click', function () {
       if(flag){
        flag = false;
            // num = num == 5 ?0:num;
        if (num == ul.children.length - 1) {
            num = 0;
            ul.style.left = 0;
        }
        num++;

        
        c++;
        if (c == ol.children.length) {
            c = 0;
        }
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[c].className = 'bai';
        animate(ul, -num * focus.offsetWidth,function(){
            flag = true;
        });
       }
    });

    anniul.addEventListener('click', function () {
        if(flag){
            flag = false;
        // num = num == 5 ?0:num;

        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num*focus.offsetWidth+'px';
        }
        num--;

        animate(ul, -num * focus.offsetWidth,function(){
            flag = true;
        });
        
        if (c ==0) {
            c = ol.children.length;
        }
        c--;

        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[c].className = 'bai';}
    });
    var timer = setInterval(function(){
        anniur.click();
    },2000)
    xianshi();
    panduanyanse();

    var f =true;
    $(window).scroll(function(){
        xianshi();
        if(f){
            panduanyanse();
        }
    })
    function panduanyanse() {
        $('.cebianlan li').each(function(i,d){
            // console.log(d);
            
            if($(document).scrollTop()>= $('.floor .w').eq(i).offset().top){
                $(this).addClass('hong');
                $(this).siblings('li').removeClass('hong');
            }
        });
    }
    function xianshi() {
        if($(document).scrollTop()>= $('.youqu').offset().top){
            $('.cebianlan').css('display','block');
        }
    }
    $('.cebianlan li').click(function(){
        // console.log($(this).index());
        f = false;
        $(this).addClass('hong');
        $(this).siblings('li').removeClass('hong');
        var c = $('.floor .w').eq($(this).index()).offset().top;

        $('body,html').stop().animate({
            scrollTop: c
        },function(){
            f=true;
        })
    })






})